<template>
  <div>
    <div>
      <el-button type="primary" @click="goEdit()">新增文章</el-button>
      <el-button type="primary" @click="showGroupDialog()">分组管理</el-button>
      <el-select v-model="currentGid" placeholder="请选择" @change="groupChange">
        <el-option
          v-for="item in groupList"
          :key="item.gid"
          :label="item.name"
          :value="item.gid"
        >
        </el-option>
      </el-select>
    </div>
    <p>
      当前链接：http://ymd.dzfinvest.com/#/generalList/{{currentGid}}
      <el-button
        type="text"
        class="button copylink"
        @click="copyHandler"
        :data-clipboard-text="`http://ymd.dzfinvest.com/#/generalList/${currentGid}`"
      >
        复制链接
      </el-button>
    </p>
    <el-table :data="list" class="ymd-table">
      <el-table-column
        prop="title"
        label="文章标题"
      >
      </el-table-column>
      <el-table-column
        label="小图"
      >
        <template scope="scope">
          <img :class="$style.articleImg" :src="scope.row.content" alt="">
        </template>
      </el-table-column>
      <el-table-column
        label="摘要"
      >
        <template scope="scope">
          <p :class="$style.subTitle">{{scope.row.subTitle}}</p>
        </template>
      </el-table-column>
      <el-table-column
        prop="sort"
        label="排序权重"
      >
      </el-table-column>
      <el-table-column
        label="操作"
        width="150"
      >
        <template scope="scope">
          <el-button
            size="small"
            @click="goEdit(scope.row.id)">编辑</el-button>
          <el-button
            size="small"
            type="danger"
            @click="handleDelete(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[10, 20, 30, 40]"
      :page-size="currentPageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>
    <el-dialog title="分组管理" :visible.sync="groupDialogVisible">
      <el-input v-model="groupName" auto-complete="off" :style="{width: '200px'}"></el-input>
      <el-button @click="addGroup">添 加</el-button>
      <el-table :data="groupList" :style="{marginTop: '20px'}">
        <el-table-column property="name" label="名称"></el-table-column>
        <el-table-column
          label="操作"
          width="150"
        >
          <template scope="scope">
            <el-button
              size="small"
              type="danger"
              @click="handleDeleteGroup(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
  </div>
</template>

<script>
import * as apis from 'services/articles'
import Clipboard from 'clipboard'

export default {
  name: 'ArticlesList',
  data() {
    return {
      groupDialogVisible: false,
      currentPage: 1,
      currentPageSize: 10,
      currentCateIndex: 0,
      currentGid: 0,
      list: [],
      groupList: [],
      total: 0,
      groupName: '',
    }
  },
  created() {
    this.getList()
    this.getArticlesGroup()
  },
  methods: {
    getArticlesGroup() {
      apis.getArticlesGroup()
        .then((data) => {
          const ary = data
          ary.unshift({
            gid: 0,
            name: '未分组',
          })
          this.groupList = ary
        })
    },
    getList() {
      apis.getArticles({
        page: this.currentPage,
        currentPageSize: this.currentPageSize,
        gid: this.currentGid,
      })
      .then((data) => {
        this.list = data.data
        this.total = data.total
      })
    },
    goEdit(id) {
      console.log(id)
      if (id) {
        this.$router.push({
          path: '/articlesListEdit',
          query: { id },
        })
      } else {
        this.$router.push('/articlesListEdit')
      }
    },
    showGroupDialog() {
      this.groupDialogVisible = true
    },
    addGroup() {
      apis.addArticlesGroup(this.groupName)
        .then(() => {
          this.groupName = ''
          this.getArticlesGroup()
        })
    },
    async handleDeleteGroup(row) {
      const isDel = await this.$confirm('确定要删除吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
      if (isDel) {
        await apis.deleteGroup(row.gid)
        this.getArticlesGroup()
      }
    },
    copyHandler() {
      const clipboard = new Clipboard('.copylink')
      clipboard.on('success', () => {
        this.$message('复制成功!')
      })
    },
    handleSizeChange(pageSize) {
      this.currentPageSize = pageSize
      this.getList()
    },
    handleCurrentChange(page) {
      this.currentPage = page
      this.getList()
    },
    groupChange(gid) {
      this.currentGid = gid
      this.getList()
    },
    handleEdit(row) {
      this.showDialog()
      apis.getArticleInfo(row.id)
        .then((data) => {
          this.form = data
        })
    },
    async handleDelete(row) {
      const isDel = await this.$confirm(`此操作将删除${row.title}, 是否继续?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
      if (isDel) {
        await apis.delArticle(row.id)
        this.getList()
      }
    },
  },
}
</script>

<style module>
.articleImg {
  width: 60px;
  height: 60px;
}

.subTitle {
  min-width: 200px;
  overflow: hidden;
  text-shadow: ellipsis;
  word-wrap: nowrap;
}
</style>
